<template>
  <div class="login">

    <el-card class="login_card">

      <el-image class="login_image" :src="logo_url" fit="cover"></el-image>
      <p class="login_title">登入</p>
      <p class="login_desc">欢迎登入广西标准化协会后台管理系统</p>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">



        <el-form-item prop="username">

          <el-input placeholder="请输入管理员账号" v-model="ruleForm.username" prefix-icon="el-icon-user">
          </el-input>
        </el-form-item>


        <el-form-item prop="password">
          <el-input type="password" placeholder="默认密码aaaa" v-model="ruleForm.password" prefix-icon="el-icon-lock">
          </el-input>
        </el-form-item>
        <el-button :loading="loginLoading" style="background: #5b89fe;color: white;" @click="submitForm('ruleForm')">登入
        </el-button>


      </el-form>

    </el-card>

    <el-container>

      <!-- <el-footer><el-button @click="home">前往首页</el-button></el-footer> -->
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      logo_url: require("@/assets/logo.png"),

      loginLoading: false,
      ruleForm: {
        username: 'admian为管理员,mall123为用户',
        password: ''

      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    home() {
      this.$router.push({
        name: "homeaaaa"
        // name:'home'
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loginLoading = true;
          console.log(this.ruleForm)
          axios({
            url: "http://43.143.166.235:8090/chaxun/login",
            method: "post",
            data: {
              "username": this.ruleForm.username,
              "password": this.ruleForm.password
            }
          }).then(res => {
            console.log(res)
            if (res.data.data) {

              localStorage.setItem("e_token", res.data.data.token);
              this.$message.success(res.data.errmsg)
              this.$store.commit('getInfo')
              setTimeout(() => {
                this.$router.push({
                  name: "homeaaa"
                })
              }, 1500);

            } else {
              this.$message.error(res.data.errno)
              this.loginLoading = false
            }

          })
            .catch((err) => {
              this.$message.error('服务器连接失败')
              this.loginLoading = false
            })
        } else {
          return false
        }
      });
    },
  },
  created() {

  }
}
</script>
<style scoped>
.logo_image {
  width: 50px;
  height: 50px;
  margin-top: 40px;
}

.login_title {
  font-size: 25px;
  font-weight: bold;
}

.login_desc {
  letter-spacing: 2px;
  color: #999a9a;
}

.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/aaa.jpg");
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}

.login_card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
  min-width: 300px;
  height: 500px;
  min-height: 500px;
  border-radius: 10px;
  text-align: center;
}
</style>